<script setup>
import {
	ref,
	onMounted,
	provide
} from 'vue';
import {
	useRouter
} from 'vue-router';
import LoginVue from './components/Login.vue';

provide('globalLoading', {
	setLoading(value) {
		loading.value = value;
	}
});

const loading = ref(false);
const name = ref(localStorage.getItem('name'));
const showLogout = ref(true);
const loginComponent = ref(null);
const router = useRouter();

showLogout.value = localStorage.getItem('uid') && localStorage.getItem('token') ? true : false;

const showLoginModal = () => {
	loginComponent.value.showLogin();
}

const logout = function () {
	localStorage.clear();
	router.go(0);
	setTimeout(() => {
		showLoginModal();
	}, 100);
}

const handleUpdateName = function (newName) {
	name.value = newName;
	showLogout.value = true;
	router.go(0);
}

const gotoPointsDetails = function () {
	router.push('/pointdetail')
}

onMounted(() => {
	showLoginModal();
})
</script>


<template>
	<div class="app-page" v-loading="loading">
		<div class="TopDiv">
			<el-dropdown v-if="showLogout">
				<span class="el-dropdown-link">
					欢迎,{{ name }}
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="gotoPointsDetails">查看积分</el-dropdown-item>
						<el-dropdown-item divided @click="logout">
							<el-text type="danger">退出登录</el-text>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<div>
			<router-view></router-view>
		</div>
		<LoginVue ref='loginComponent' @updateName="handleUpdateName" />
	</div>
</template>

<style scoped>
.app-page {
	width: 100%;
	height: 100%;
}

.TopDiv {
	min-height: 30px;
	height: 5%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	padding: 0px 10px;
	border-radius: 0px 0px 5px 5px;
	background-color: black;
	box-shadow: 2px 0px 10px 0px #8f939c;
}

.example-showcase .el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}
</style>